import UserIndexTabsLess from "./userIndexTabs.module.less";
import { SearchOutlined } from "@ant-design/icons";
import { useState } from "react";
import { Outlet, useNavigate } from "react-router-dom";

function UserIndexTabs() {
  const navigate = useNavigate();
  const [ActiveIndex, setActiveIndex] = useState(1);
  const tabList = [
    { name: "动态", id: 1, url: "" },
    { name: "文章", id: 2, url: "posts" },
    { name: "专栏", id: 3, url: "columns" },
    { name: "沸点", id: 4, url: "pins" },
    { name: "收藏集", id: 5, url: "collections" },
    { name: "关注", id: 6, url: "tags" },
    { name: "赞", id: 8, url: "likes" },
  ];
  const selectTab = (item: any) => {
    setActiveIndex(() => item.id);
    navigate("/myhome/" + item.url);
  };
  return (
    <>
      <div className={UserIndexTabsLess.userIndexTabsContent}>
        <div className="topTabs">
          <div className="left_tabs">
            {tabList.map((item) => {
              return (
                <div
                  className="tabs_item"
                  key={item.id}
                  onClick={() => selectTab(item)}
                >
                  <div className="tabs_title">{item.name}</div>
                  <div
                    className={[
                      item.id === ActiveIndex ? "bottom_div" : "",
                    ].join(" ")}
                  ></div>
                </div>
              );
            })}
          </div>
          <div className="right_search">
            <SearchOutlined />
          </div>
        </div>
        <div className="bottom_list_content">
          <Outlet />
        </div>
      </div>
    </>
  );
}

export default UserIndexTabs;
